<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jquery请求</title>
</head>

<body>
  <div id="root">
    <ul>
      <li v-for="item in movies" :key="item.id">
        {{ item.showInfo }}
      </li>
    </ul>
  </div>

  <script src="./js/vue.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
  <script>
    new Vue({
      el: '#root',
      data: {
        // 电影列表数据
        movies: []
      },
      async mounted() {
        // 网络请求地址
        const url = 'http://127.0.0.1:5500/data/db.json'
        /*
        // 简写操作 支持promise
        $.get().then()
        $.post().then()
        // 标准写法 promise解决异步回调用，jquery新版本已经支持
        $.ajax({
          url,
          type:get/post,
          // post/put/delete 传数据所用
          data,
          // 默认就为json，可以不写
          dataType:json/text/xml/html/jsonp
        }).then().catch()
        */
        /* $.ajax({
          // 请求的url地址
          url,
          // 请求方法 get/post/put/delete
          type:'get',
        }).then(ret=>console.log(ret)) */

        let data = await $.ajax({
          // 请求的url地址
          url,
          // 请求方法 get/post/put/delete
          type:'get'
        })
        this.movies = data.movieList

      }
    })
  </script>
</body>

</html>